<template>
	<view class="zy_group_container">
		<view
			:class="{'zy_group_classic': model=='classic', 'zy_group_easy': model=='easy', 'zy_group_insideCard':model=='insideCard' ,'zy_group_card':model=='card'}">
			<view
				:class="{'zy_group_classic_title': model=='classic', 'zy_group_easy_title': model=='easy', 'zy_group_insideCard_title':model=='insideCard' ,'zy_group_card_title':model=='card'}">
				<view style="display: flex;">
					<view class="zy_group_title_border" v-if="model=='classic'|| model=='insideCard'"
						:style="[{backgroundColor:`${color}`}]"></view>
					<!-- <:style="[{backgroundColor:color=== '[object String]'?`${customColor}`:`${color}`}]"></view> -->
					{{title}}
				</view>
				<!-- <checkbox :checked="checked" :value="checkboxValue" :disabled="checkboxDisabled" v-if="checkboxShow"/> -->
				<switch style="transform:scale(0.7)" :checked="checked" @change="switchHandle($event)"
					v-if="switchShow" />
				<view class="zy_group_btn">
					<view class="zy_group_btn" v-for="(item,index) in btnList" v-if="btnList.length>0">
						<zy-button :type="item.type" @click="item.handle(item,index)" plain size="mini" :disabled="item.disabled"
							v-if="item.handle">{{item.text}}</zy-button>
						<zy-button :type="item.type" @click="btnHandle()" plain size="mini" :disabled="btnDisabled"
							v-else>{{item.text}}</zy-button>
						<view class="zy_group_btn_border" v-if="index!=btnList.length-1&&btnList.length!==1"></view>
					</view>
				</view>
			</view>
			<!-- 父组件插槽 -->
			<view :class="model=='insideCard'?'zy_group_insideCard_slot':''">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 组模式
			model: {
				type: String,
				default: 'classic'
			},
			//组头名称
			title: {
				type: String,
				default: ''
			},
			//组头边框颜色
			color: {
				type: String | Object,
				default: "#409efe"
			},
			// 多选框是否显示
			checkboxShow: {
				type: Boolean,
				default: false
			},
			// 多选框value值
			checkboxValue: {
				type: String,
				default: ''
			},
			// 多选框是否禁用
			checkboxDisabled:{
				type: Boolean,
				default: false
			},
			// 开关是否显示
			switchShow: {
				type: Boolean,
				default: false
			},
			// 按钮名称
			btnList: {
				type: Array
			},
			// 按钮禁用
			btnDisabled:{
				type: Boolean,
				default: false
			},
		},
		watch: {},
		data() {
			return {
				checked: false
			}
		},
		methods: {
			//组头开关事件
			switchHandle($event) {
				this.$emit('switchHandle', $event)
			},
			// 按钮事件
			btnHandle() {
				this.$emit('btnHandle')
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>